<template>
  <div>
    <el-card class="box-card" style="opacity: 0.8;">
      <div slot="header" class="clearfix" style="font-size: 18px">
        <i class="el-icon-s-grid"></i>
        <span>认证类型</span>
      </div>
      <div style="margin-top: 15px">
        <el-input
          placeholder="请输入内容"
          class="input-with-select"
          style="width: 400px"
          @clear="select"
          clearable
          v-model="queryinfo.name"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="select"
          ></el-button>
        </el-input>
        <el-button
          type="primary"
          round
          class="right-but"
          @click="addlicensetypes"
          ><i class="el-icon-plus" />新添</el-button
        >
      </div>
      <el-divider></el-divider>
      <el-table stripe style="width: 100%" border :data="accounttypes">
        <el-table-column label="#" width="180" type="index"> </el-table-column>
        <el-table-column prop="account" label="名称"> </el-table-column>
        <el-table-column label="认证图片">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="imgurl + scope.row.accountimg"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="toupdate(scope.row.accountid)"
            >
            </el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="todelete(scope.row.accountid)"
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加对话框 -->
      <el-dialog
        title="添加认证类型"
        :visible.sync="addDialogVisible"
        width="50%"
        :before-close="reset"
      >
        <!-- 添加用户信息的表单 -->
        <el-form
          :model="addlicensetype"
          :rules="addRule"
          ref="addlicensetypeRef"
          label-width="80px"
        >
          <el-form-item label="类型名称" prop="account">
            <el-input v-model="addlicensetype.account"></el-input>
          </el-form-item>

          <el-form-item label="头像">
            <!-- 图片上传
			  							action:默认上传的路径
			  							list-type:上传的组件样式
			  							on-preview:图片放大函数
			  							on-remove：图片移除时的函数
			  							on-success:图片上传成功后的函数
			  					 -->
            <el-upload
              action="http://localhost:8888/crowdfunding_system_war_exploded/uploadFile"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="uploadSuccess"
              :file-list="fileList"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <!-- 图片放大后的对话框 -->
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
        </el-form>
        <!-- 取消和添加按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="reset">取 消</el-button>
          <el-button type="primary" @click="addlicensetypeForm"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 修改对话框 -->
      <el-dialog
        title="修改认证类型"
        :visible.sync="updateDialogVisible"
        width="50%"
        :before-close="updatereset"
      >
        <!-- 修改信息的表单 -->
        <el-form
          :model="updatelicensetype"
          :rules="addRule"
          ref="updatelicensetypeRef"
          label-width="80px"
        >
          <el-form-item label="类型名称" prop="account">
            <el-input v-model="updatelicensetype.account"></el-input>
          </el-form-item>

          <el-form-item label="头像">
            <!-- 图片上传
			  							action:默认上传的路径
			  							list-type:上传的组件样式
			  							on-preview:图片放大函数
			  							on-remove：图片移除时的函数
			  							on-success:图片上传成功后的函数
			  					 -->
            <el-upload
              action="http://localhost:8888/crowdfunding_system_war_exploded/uploadFile"
              list-type="picture-card"
              :on-preview="updatehandlePictureCardPreview"
              :on-remove="updatehandleRemove"
              :on-success="updateuploadSuccess"
              :file-list="fileList"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <!-- 图片放大后的对话框 -->
            <el-dialog :visible.sync="updatedialogVisible">
              <img width="100%" :src="updatedialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
        </el-form>
        <!-- 取消和添加按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="updatereset">取 消</el-button>
          <el-button type="primary" @click="updatelicensetypeForm"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.pagenum"
        :page-sizes="[2, 4, 5, 10]"
        :page-size="queryinfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      queryinfo: {
        name: "", //用户名的模糊查询
        pagenum: 1, //访问的页码
        pagesize: 4, //默认页面展示的条数
      },
      accounttypes: [],
      total: 0,
      imgurl:'http://localhost:8888/crowdfunding_system_war_exploded/showImg?filename=',
      addDialogVisible: false,
      addlicensetype: {
          account: "",
          accountimg:''
        },
      addRule: {
          account: [
            {
              required: true,
              message: "请输入认证类型",
              trigger: "blur",
            },
            {
              min: 2,
              max: 10,
              message: "长度在 2 到 10个字符",
              trigger: "blur",
            },
          ],
        },
        dialogVisible:false,
        fileList:[],
        dialogImageUrl:'',
        updatelicensetype: {
            accountid:'',
            account: "",
            accountimg:''
        },
        updatedialogImageUrl:'',
        updatedialogVisible:false,
        updateDialogVisible:false
     
    };
  },
  methods: {
    async selectAllAccountTypes() {
      var param = new URLSearchParams();
      param.append("pagenum", this.queryinfo.pagenum);
      param.append("pagesize", this.queryinfo.pagesize);
      param.append("name", this.queryinfo.name);
      var res = await this.$http.post("/selectAllAccountTypes", param);
      if (res.data.code != "200") {
        this.$message.info(res.data.message);
      } else {
        this.accounttypes = res.data.data.list;
        //获取数据的总条数
        this.total = res.data.data.total;
      }
    },
    handleSizeChange(newpagesize) {
      this.queryinfo.pagesize = newpagesize;
      this.selectAllAccountTypes();
    },
    handleCurrentChange(newpagenum) {
      this.queryinfo.pagenum = newpagenum;
      this.selectAllAccountTypes();
    },
    select() {
      this.queryinfo.pagenum = 1;
      this.selectAllAccountTypes();
    },
    addlicensetypes(){
      this.addDialogVisible= true
    },
    handlePictureCardPreview(file){
      this.dialogImageUrl = file.url;
			this.dialogVisible = true;
    },
    uploadSuccess(response){
      if(response.code==200){
        this.addlicensetype.accountimg = response.message
      }
    },
    //图片移除的函数
    handleRemove(file, fileList) {
        this.addlicensetype.accountimg = '' //移除图片
    },
    //添加对话框中的取消事件
    reset(){
      this.fileList=[]
      this.addDialogVisible = false
      this.$refs.addlicensetypeRef.resetFields()
    },
    addlicensetypeForm(){
      this.$refs.addlicensetypeRef.validate(async(val)=>{
					if(val){
						var res = await this.$http.post("addAccountType",qs.stringify(this.addlicensetype))
						if(res.data.code=='200'){
							this.$message.success(res.data.message)
							this.selectAllAccountTypes()
						}else{
							this.$message.error(res.data.message)
						}
						this.reset()
					}else{
						this.$message.error("数据不合法，请检查")
					}
				})
    },
    updatereset(){
      this.fileList=[]
      this.updateDialogVisible = false
      this.$refs.updatelicensetypeRef.resetFields()
    },
    updatehandlePictureCardPreview(file){
      this.updatedialogImageUrl = file.url;
			this.updatedialogVisible = true;
    },
    updateuploadSuccess(response){
      if(response.code==200){
        this.updatelicensetype.accountimg = response.message
      }
    },
    //图片移除的函数
    updatehandleRemove(file, fileList) {
        this.updatelicensetype.accountimg = '' //移除图片
    },
    async toupdate(id){
				var res = await this.$http.get("selectByIds?id="+id)
				if(res.data.code==200){
					this.updatelicensetype = res.data.data
					//把当前对象的图片路径放入到filelist
					var tp = {url:this.imgurl+this.updatelicensetype.accountimg}
					this.fileList.push(tp)
					this.updateDialogVisible=true
				}else{
					this.$message.error(message)
				}
			},
    updatelicensetypeForm(){
      this.$refs.updatelicensetypeRef.validate(async(val)=>{
        if(val){
            var res = await this.$http.post("updateAccountType",qs.stringify(this.updatelicensetype))
            if(res.data.code==200){
              this.$message.success(res.data.message)
              this.selectAllAccountTypes()
            }else{
              this.$message.error(res.data.message)
            }
            this.updatereset()
        }else{
              this.$message.error("数据不合法，请检查")
            }
      })
      },
      todelete(id){
        this.$confirm("此操作将永久删除该对象, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          var res = await this.$http.get("delAccountType?id=" + id);
          if (res.data.code == "200") {
            this.$message.success(res.data.message);
            this.select()
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      }
  },
  
  mounted() {
    this.selectAllAccountTypes();
  },
}
</script>

<style scoped>
.right-but {
  float: right;
}
</style>